<template>
    <div style="width: 60%; margin: 10px auto;">
        <div style="display: flex; grid-gap: 20px">
            <div style="flex: 1;">
                <img :src="nurseHouse.img" alt="" style="width: 100%;">
            </div>
            <div style="flex: 1;">

                <div style=" margin: 20px 0; display: flex; align-items:center">
                    <div style="font-size: 22px; font-weight: bold; flex: 1">{{ nurseHouse.name }}</div>
                    <div style="color: #666;">{{ nurseHouse.count }}浏览</div>
                </div>

                <div style="margin: 10px 0;">
                    <el-tag style="margin-right: 10px;" v-for="item in JSON.parse(nurseHouse.tags || '[]')" :key="item">{{ item }}</el-tag>
                </div>
                <div style="margin: 10px 0; color: #ffa400;font-size: 18px; font-weight: bold;">{{ nurseHouse.price }}</div>
                <div style="margin: 20px 0; color: #666;">{{ nurseHouse.address }}</div>

                <div style="display: flex; margin: 10px 0;">
                    <div style="width: 200px;"><span style="color: #666;">机构性质：</span>{{ nurseHouse.nature }}</div>
                    <div style="flex: 1;"><span style="color: #666;">机构类型：</span>{{ nurseHouse.type }}</div>
                </div>
                <div style="display: flex; margin: 10px 0;">
                    <div style="width: 200px;"><span style="color: #666;">成立时间：</span>{{ nurseHouse.date }}</div>
                    <div style="flex: 1;"><span style="color: #666;">床位数量：</span>{{ nurseHouse.beds }}</div>
                </div>
                <div style="display: flex; margin: 10px 0;">
                    <div style="width: 200px;"><span style="color: #666;">机构面积：</span>{{ nurseHouse.area }}</div>
                </div>

                <div style="margin: 20px 0;">
                    电话：<span style="font-size: 20px; font-weight: bold; color: orangered;">{{ nurseHouse.phone }}</span>
                </div>
            </div>
        </div>

        <div style="margin: 30px 0;">
            <div style="font-weight: bold; font-size: 22px; text-align: center; margin-bottom: 30px">详细信息</div>

            <div style="margin: 20px 0;">
                <!-- 初始化容器 -->
                <div id="container" style="height: 400px; margin-bottom: 30px"></div>
            </div>

            <div style="line-height: 26px;" class="w-e-text">
                <div v-html="nurseHouse.content"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name:"HouseDetail",
    data(){
        return{
            id:this.$route.query.id,
            nurseHouse:{},
        }
    },
    created(){
        this.$request.put('/nurseHouse/updateCount/'+this.id).then(res=>{
            this.load()
        })
        
    },
    methods:{
        load(){
            this.$request.get('/nurseHouse/selectById/'+this.id).then(res =>{
                this.nurseHouse=res.data || {}

                var map = new BMapGL.Map('container'); // 创建Map实例
                map.centerAndZoom(new BMapGL.Point(this.nurseHouse.longitude, this.nurseHouse.latitude), 16); // 初始化地图,设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
                let point = new BMapGL.Point(this.nurseHouse.longitude, this.nurseHouse.latitude)
                let marker = new BMapGL.Marker(point);  // 创建标注
                map.addOverlay(marker);
                let opts = {
                    width : 300,     // 信息窗口宽度
                    height: 100,     // 信息窗口高度
                    title : this.nurseHouse.name , // 信息窗口标题
                }
                let infoWindow = new BMapGL.InfoWindow(
                    "<b>地址</b>：" + this.nurseHouse.address + "<br/>",
                    opts);  // 创建信息窗口对象

                marker.addEventListener("click", function(){
                map.openInfoWindow(infoWindow,point); //开启信息窗口
                });
            })
        }
    }
}
</script>

<style scoped>

</style>